<template>
  <!--面包屑-->
  <div style="margin-bottom: 30px">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <router-link to="/Approval/MaterialRequisitionApproveShow">物资领用审批</router-link>
      </el-breadcrumb-item>
      <el-breadcrumb-item>物资领用审批列表</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  
    <!--查询条件-->
    <div style="margin-bottom: 30px;">
      领用人：<el-input v-model="form.Recipient" placeholder="请输入领用人" style="width: 240px;"></el-input>&nbsp;&nbsp;
      领用日期：<el-date-picker v-model="form.CollectionDate" type="date" placeholder="请选择领用日期" value-format="YYYY-MM-DD"/>&nbsp;&nbsp;
      审批状态：
    <el-select v-model="form.ApprovalStatus" placeholder="请选择" style="width: 240px;">
      <el-option label="全部" value="" />
      <el-option v-for="item in ApprovalStatusData" :key="item.enumId" :label="item.enumName" :value="item.enumId" />
    </el-select> &nbsp;&nbsp; &nbsp;&nbsp; 
  
      <br/>
      <br/>
      审批人：<el-input v-model="form.Approver" placeholder="请输入审批人" style="width: 240px;"></el-input>&nbsp;&nbsp;
      
      <el-button type="primary" @click="getStoreList">查询</el-button>
      <el-button @click="reset">重置</el-button>
      <br/>
      <br/>
    </div>
    
    <!--物资列表-->
    <div>
      <el-table :data="StoreData" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" />
        <el-table-column prop="title" label="标题" align="center" />
        <el-table-column prop="usageDescription" label="用途描述" align="center" width="160px" />
        <el-table-column prop="recipient" label="领用人" align="center" />
        <el-table-column prop="collectionDate" label="领用时间" align="center" width="135px" >
          <template v-slot="scope">
            {{ scope.row.collectionDate.substr(0,16).replace("T"," ") }}
          </template>
        </el-table-column>
        <el-table-column prop="materialRequisitNotes" label="备注" align="center" />
        <el-table-column prop="createdDate" label="创建时间" align="center" width="135px" >
          <template v-slot="scope">
            {{ scope.row.createdDate.substr(0,16).replace("T"," ") }}
          </template>
        </el-table-column>
        <el-table-column prop="approvalStatus" label="审批状态" align="center" >
          <template v-slot="scope">
            <el-tag type="primary" v-if="scope.row.approvalStatus==10">待提交</el-tag>
            <el-tag type="warning" v-if="scope.row.approvalStatus==20">待审批</el-tag>
            <el-tag type="success" v-if="scope.row.approvalStatus==30">已通过</el-tag>
            <el-tag type="danger"  v-if="scope.row.approvalStatus==40">已拒绝</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="approver" label="审批人" align="center" />
        <el-table-column label="操作" align="center" width="202px" >
          <template v-slot="scope">
          <el-link type="primary" target="_blank" @click="lockUp(scope.row.materialRequisitionId)" >查看</el-link>&nbsp;&nbsp;
          <el-link type="primary" target="_blank" :disabled="scope.row.approvalStatus == 30 || scope.row.approvalStatus == 40"  @click="MaterialApprovalCommand(scope.row.materialRequisitionId,30)" >通过</el-link>&nbsp;&nbsp;
          <el-link type="primary" target="_blank" :disabled="scope.row.approvalStatus == 30 || scope.row.approvalStatus == 40"  @click="MaterialApprovalCommand(scope.row.materialRequisitionId,40)" >拒绝</el-link>&nbsp;&nbsp;
        </template>
        </el-table-column>
      </el-table>
    </div>

    <!--分页-->
    <div>
      <table>
      <thead></thead>
      <tbody>
        <tr>
          <td>
            <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[15, 20, 25, 30]" :background="true" layout="total,slot, sizes" :total="form.totalCount" prev-text="上一页" next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange">
              <span>
                ，每页{{ form.pageSize }}条，当前第:{{ form.pageIndex }}/{{ form.pageCount }}页
              </span>
            </el-pagination>
          </td>
    
          <td>
            <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[15, 20, 25, 30]" :background="true" layout="slot, prev, pager, next" :total="form.totalCount" prev-text="上一页" next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange">
              <el-button type="primary" class="btn-prev" @click="handleCurrentChange(1)" :disabled="form.pageIndex==1">首页</el-button>
            </el-pagination>
          </td>
    
          <td>
            <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[15, 20, 25, 30]" :background="true" layout="slot, jumper" :total="form.totalCount" prev-text="上一页" next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange">
              <el-button type="primary" class="btn-prev" @click="handleCurrentChange(form.pageCount)" :disabled="form.pageIndex==form.pageCount">尾页</el-button>
            </el-pagination>
          </td>
        </tr>
      </tbody>
    </table>
    </div>
    </template>
    
    <script setup lang="ts">
    import { reactive, ref, onMounted, computed } from 'vue'
    import axios from 'axios';
    import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
    import { ElMessage, ElMessageBox } from 'element-plus'
    
    import {useRoute,useRouter} from 'vue-router'
    
    const route = useRoute();
    const router = useRouter();
    
    onMounted(() => {
      //获取审批状态枚举反射
      getApprovalStatus()
  
      //物资列表
      getStoreList()
    })
  
  //获取审批状态枚举反射
  const ApprovalStatusData:any=ref([])
  const getApprovalStatus=()=>{
    axios.get('/mread/api/ShowMaterialStore/GetApprovalStatusEnum').then(res=>{
      //console.log(res);
      ApprovalStatusData.value = res.data;
    }).catch(err=>{
      console.log(err);
      
    })    
  }
    
    const form: any = reactive({
      Recipient: '',
      CollectionDate: '',
      ApprovalStatus: '',
      Approver:'',
      pageIndex: 1,
      pageSize: 15,
      pageCount: 0,
      totalCount: 0,
      buttonArray: [],
      approvalStatus:''
    })
    
  //存储多选中的物资id
  const multipleSelection:any = ref([]);
  const handleSelectionChange = (val:any) => {
    multipleSelection.value = val;
    console.log(multipleSelection.value);
    
  }
    
    //分页
    const handleSizeChange = (val: number) => {
      form.pageSize = val;
      getStoreList()
    }
    const handleCurrentChange = (val: number) => {
      form.pageIndex = val;
      getStoreList()
    }
    
    //物资审批列表
    const StoreData:any=ref([])
    const getStoreList = () => {
      axios.get('/mread/api/ExamineAndApprove/GetMaterialRequisitionApproveList', {
        params: {
          Recipient: form.Recipient,
          CollectionDate: form.CollectionDate,
          ApprovalStatus: form.ApprovalStatus,
          Approver: form.Approver,
          pageIndex: form.pageIndex,
          pageSize: form.pageSize,
        }
      }).then(res=>{
        console.log(res);
        StoreData.value = res.data.data.list;
        form.totalPage = res.data.data.pageCount;
        form.totalCount = res.data.data.totalCount;
      }).catch(err=>{
        console.log(err);
        
      })    
    }
    
    //重置
    const reset = () => {
      form.Recipient= '',
      form.CollectionDate= '',
      form.ApprovalStatus='',
      form.Approver='',
      form.pageIndex = 1,
      form.pageSize = 5,
      getStoreList()
    }
    

  //修改状态--通过/不通过
  const MaterialApprovalCommand = (materialRequisitionId: number, approvalStatus: number) => {
    axios.post('/mwrite/api/MaterialRequisition/UpdateMaterialStatisticsApprovalStatus', {
      materialRequisitionId: materialRequisitionId,
      approvalStatus: approvalStatus,
    }).then(res => {
      console.log(res);
      if (res.data.code > 0) {
        ElMessage.success("审批成功!")
        //刷新页面
        getStoreList()
      } else {
        ElMessage.error(res.data.message)
        return
      }
    }).catch(err => {
      console.log(err);

    })
  }

      //查看
  const lockUp = (materialRequisitionId: number) => {
    axios.get('/mread/api/ShwoMaterialRequisition/ReverseMaterialRequisition', {
      params: {
        materialRequisitionId: materialRequisitionId
      }
    }).then(res => {
      console.log(res);
      
      form.approvalStatus = res.data.data.approvalStatus
      //已审批
      if (form.approvalStatus == 30 || form.approvalStatus == 40) {
        router.push({
          path: '/Approval/MaterialRequisitionLock',
          query: {
            materialRequisitionId: materialRequisitionId
           }

        })
      }
      else {
        //未审批
        router.push({
          path: '/Approval/MaterialRequisitionApprove',
          query: { 
            materialRequisitionId: materialRequisitionId
           }

        })
      }
    })
  }
    </script>
    
    <style scoped>
    
    </style>